import { ref, watch } from "vue";
// import {Planet, Music, VideoOne, Fm, Like, Computer, DownloadThree, PlayTwo} from '@icon-park/vue-next'
import { useRoute, useRouter } from "vue-router";

interface IMenu {
    name: string;
    key: string;
    icon: any;

}

interface IMenus {
    name: string,
    menus: IMenu[],
}

export function useMenu() {
    const menus: IMenus[] = [
        {
            name: "",
            menus: [
                {
                    name: "推荐",
                    key: "discover",
                    icon: "HomeFilled",
                },
                {
                    name: "精选",
                    key: "featured",
                    icon: "Burger",
                },
                {
                    name: "播客",
                    key: "podcast",
                    icon: "Box",
                },
                {
                    name: "漫流",
                    key: "stream",
                    icon: "MessageBox",
                },
                {
                    name: "关注",
                    key: "follow",
                    icon: "ChatLineRound",
                },
            ]
        },
        {
            name: "我的",
            menus: [
                {
                    name: "我喜欢的音乐",
                    key: "liked",
                    icon: "GoldMedal",
                },
                {
                    name: "最近播放",
                    key: "recent",
                    icon: "VideoPlay",
                },
                {
                    name: "我的播客",
                    key: "my-podcast",
                    icon: "UserFilled",
                },
                {
                    name: "我的收藏",
                    key: "favorites",
                    icon: "StarFilled",
                },
            ]
        }
    ];

    const route = useRoute();
    console.log(route,'route.meta');
    const currentKey = ref(route.name);

    const router = useRouter();

    // watch(
    //     () => route.meta.menu,
    //     (menu) => {
    //         currentKey.value = menu.key;
    //     }
    // );

    const click = async (menu: IMenu) => {
        currentKey.value = menu.key;
        console.log(menu.key);
        await router.push({ name: menu.key, replace: true, })
    };

    return {
        menus,
        click,
        currentKey,
    };
}